<template>
  <div>
    <div id="main" style="width: 500px; height: 500px"></div>

  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
export default {
  name: "xiaoechart",
  data() {
    return {
      userid: 2,
      data: '',
    };
  },
  methods: {
    initechart() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          data:this.data[0],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.data[1],
            type: "bar",
          },
        ],
      };

      option && myChart.setOption(option);
    },
    getdata() {
      axios({
        url: "http://127.0.0.1:5000/getechartdata",
        method: "get",
        params: { userid: this.userid },
      }).then((res) => {
        console.log(res.data.list,111);
        this.data = res.data.list;
        this.initechart();
      });
    },
  },
  mounted() {
    this.initechart();
    this.getdata()
  },
};
</script>

<style scoped></style>
